<script setup>
import {ref, watch, watchEffect} from "vue";

let name = "张三"

let fruits = ["苹果","香蕉","犁"]
let url = ref("https://www.baidu.com");

function changeUrl(){
  url.value = "https://www.douyin.com"
}
watch(url, (value, oldValue, onCleanup)=>{
console.log(value+"--")
  console.log(oldValue+"====")
})
watchEffect(() => {
  if(url.value=='https://www.douyin.com') {
    alert("变了")
  }
})

let awesome = ref(false)

</script>

<template>

  <button @click="awesome = !awesome">Toggle</button>

  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>

  <a :href="url" :abc="url">GO ! {{url}}</a>
  <button @click="changeUrl">改变地址</button>
<h1>姓名：{{name}}</h1>

  <li v-for="(f,i) in fruits">{{f}}--{{i}}</li>

</template>

<style scoped>

</style>